<template>
  <view class="add-container">
    <customtop top_title="项目社"></customtop>

    <view class="item">
      <view class="left">
        <view class="title"> 标题 </view> 
        <view class="input">
          <input
            class="text-input"
            type="text"
            v-model="form.title"
            placeholder-class="input-placeholder"
            placeholder="请输入明确标题，40字以内"
            maxlength="40"
          />
        </view>
      </view>
    </view>
    <view class="item" @click="projectSelectClick">
      <view class="left">
        <view class="title"> 项目类型 </view>
        <view class="input">
          <view class="text">{{
            form.category_id ? category_name : "请选择"
          }}</view>
        </view>
      </view>
      <view class="right">
        <u-icon size="16" color="#2e2e2e" name="arrow-right"></u-icon>
      </view>
    </view>
    <view class="item" @click="imgSelectClick">
      <view class="left">
        <view class="title"> 链接和截图 </view>
        <view class="input">
          <view class="text2"> 选填，可发布链接和图片 </view>
        </view>
      </view>
      <view class="right">
        <u-icon size="16" color="#2e2e2e" name="arrow-right"></u-icon>
      </view>
    </view>
    <view class="content-item">
      <view class="left">
        <view class="title"> 内容描述 </view>
        <view class="top">
          <text class="right-text">点击查看发帖规范</text>
          <u-icon size="16" color="#3995ea" name="arrow-right"></u-icon>
        </view>
      </view>
      <view class="right">
        <view class="right-container">
          <view class="content">
            <view class="title"> 1.项目名称 </view>
            <view class="content-input">
              <textarea
                name="content"
                type="text"
                placeholder="请填写项目,产品名称(2-50字以内)"
                placeholder-class="input"
                v-model="form.xmmc"
                maxlength="50"
                minlength="2"
              />
            </view>
          </view>
          <view class="content">
            <view class="title"> 2.项目介绍 </view>
            <view class="content-input">
              <textarea
                name="content"
                type="text"
                placeholder="请填写项目介绍简介,优势提供什么服务,解决什么问题如何盈利等(10-1000字以内)"
                placeholder-class="input"
                v-model="form.xmjs"
                maxlength="1000"
                minlength="10"
              />
            </view>
          </view>
          <view class="content">
            <view class="title"> 3.合作要求 </view>
            <view class="content-input">
              <textarea
                name="content"
                type="text"
                placeholder-class="input"
                v-model="form.hzyq"
                placeholder="请填写项目合适那些群体做,如何做,以及合作前准备,合作要求等(2-200字以内)"
                maxlength="200"
                minlength="2"
              />
            </view>
          </view>
          <view class="content">
            <view class="title"> 4.收益利润 </view>
            <view class="content-input">
              <textarea
                name="content"
                type="text"
                placeholder-class="input"
                v-model="form.sylr"
                placeholder="请填写合作模式,项目收益构成以及,周,月或年收益利润范围(2-200字以内)"
                maxlength="200"
                minlength="2"
              />
            </view>
          </view>
          <view class="content">
            <view class="title"> 5.费用说明 </view>
            <view class="content-input">
              <textarea
                name="content"
                type="text"
                placeholder-class="input"
                v-model="form.fysm"
                placeholder="请填写前后期某些费用,如:加盟费,保证金,服务费,材料费等(2-200字以内)"
                maxlength="200"
                minlength="2"
              />
            </view>
          </view>
        </view>
      </view>
    </view>
    <view style="height: 200rpx"> </view>
    <bottomBtn @submit="submit"></bottomBtn>
  </view>
</template>
<script>
import customtop from "@/components/customtop.vue";
import bottomBtn from "../../components/bottomBtn.vue";
import { request, upload, addInfo } from "@/utils/http.js";
export default {
  components: {
    customtop,
    bottomBtn,
  },
  data() {
    return {
      contentValue: "",
      category_name: "",
      form: {
        category_id: null,
        title: null,
        lianjie: null,
        jietu: [1, 1, 1],
        xmmc: null,
        xmjs: null,
        hzyq: null,
        sylr: null,
        fysm: null,
      },
    };
  },
  methods: {
    projectSelectClick() {
      this.$u.route("/pages/abb/projectSelectPage");
    },
    imgSelectClick() {
      this.$u.route("/pages/abb/imgSelectPage");
    },
    submit() {
      console.log(this.form);
      const isSubmit = Object.values(this.form).includes(null);

      addInfo("/xiangmushe/addXmsArticle", "post", { ...this.form }).then(
        (res) => {
          console.log(res);
          if (res.code === 200) {
            this.$u.toast("发布成功");
            setTimeout(() => {
              uni.switchTab({ url: "/pages/tabbar/project" });
            }, 150);
          } else {
            this.$u.toast("发布失败");
          }
        }
      );
    },
  },
};
</script>
<style lang="scss" scoped>
page {
  background-color: #fff;
  height: 100%;
}

.add-container {
  padding: 20rpx;
  box-sizing: border-box;
  .item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1rpx solid #f5f5f5;

    .left {
      .input-placeholder {
        font-size: 26rpx;
        color: #7b7b7b;
      }
      .input {
        width: 800px;
        .text-input {
          width: 100%;
          height: 80rpx;
          input {
            width: 100%;
          }
        }
      }
      .title {
        margin-top: 15rpx;
        font-size: 26rpx;
      }

      .text2 {
        color: #6f6e76;
        height: 80rpx;
        line-height: 80rpx;
        font-size: 25rpx;
      }

      .text {
        height: 80rpx;
        line-height: 80rpx;
        font-size: 25rpx;
      }
    }
  }

  .content-item {
    .left {
      display: flex;
      align-items: center;
      justify-content: space-between;

      .title {
        height: 80rpx;
        line-height: 80rpx;
        font-size: 26rpx;
      }

      .top {
        display: flex;
        padding: 20rpx 0;
        box-sizing: border-box;

        .right-text {
          font-size: 24rpx;
          color: #3998f0;
          margin-right: 10rpx;
        }
      }
    }

    display: flex;
    flex-direction: column;

    ::v-deep.right {
      // .content {
      // 	.uni-textarea-placeholder {
      // 		font-size: 24rpx;
      // 		color: #818286;
      // 	}

      // 	.u-textarea {
      // 		background: #f2f3f7;
      // 		border-color: #f2f3f7 !important;
      // 	}
      // }
    }
  }
}

.right-container {
  font-size: 23rpx;

  .content {
    .title {
      font-size: 26rpx;
    }

    .content-input {
      height: 200rpx;

      .input {
        font-size: 26rpx;
      }
    }
  }
}
</style>

<style>
page {
  background: #fff;
}
</style>
